<template>
	<view class="content1">
		<view class="" v-if="tabid != 0" style="width:100%;height:100rpx;margin-top:20px;"></view>
		<view class="" v-else style="width:100%;height:20rpx;"></view>
		<view class="daoh" v-if="tabid != 0" :style="'background:' + wepro_tabbar_backgroundColor">
			<block v-for="(item,index) in menu" :key="index">
				<view class="daoh-item" @click="golink(item.url)">
					<image v-if="tabid == item.id" :src="item.icon_selected" mode="aspectFit"></image>
					<image v-else :src="item.icon" mode="aspectFit"></image>
					<text v-if="tabid == item.id" :style="'color:' + item.font_color">{{item.name}}</text>
					<text v-else :style="'color:' + item.font_color_selected">{{item.name}}</text>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	var util = require('@/js/util.js')
	export default {
		name: 'tabbar',
		data() {
			return {
				menu: [],
				wepro_tabbar_backgroundColor: '#fff',
				wepro_tabbar_frontColor: '#999',
				wepro_tabbar_frontSelectedColor: 'red',
				tabid: 0,
			};
		},
		methods: {
			setMenu(){
				// console.log("setMenu")
				// return;
				uni.request({
					url: util.getUrl("config/index"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							console.log("抽奖助手底部导航",res.data)
							this.menu = res.data.data.menu
							this.tabid = res.data.data.menu[0].id
							uni.setStorageSync("luttery_menu",res.data.data.menu)
						}
					},
				});
			},
			gettabid(page_url){
				this.menu = uni.getStorageSync("luttery_menu")
				for(var i in this.menu){
					if('/' + page_url == this.menu[i].url){
						this.tabid = this.menu[i].id;
						return;
					}
				}
			},
			golink(e) {
				// uni.switchTab({
				// 	url: e,
				// 	fail:res=>{
				// 		console.log('switchfail:',res)
				// 	}
				// });
				console.log("url",e)
				uni.reLaunch({
					url: e,
					fail:res=>{
						console.log('reLaunchfail:',res)
					}
				})
			}
		}
	};
</script>

<style>
	.daoh-item {
		align-items: center;
		justify-content: center;
		width: 20%;
		display: flex;
		font-size: 24rpx;
		height: 100rpx;
		position: relative;
		color: #666;
		flex-direction: column;
	}

	.carnum {
		position: absolute;
		top: 0;
		right: 40upx;
		width: 36upx;
		height: 36upx;
		border-radius: 50%;
		background: #f52f3e;
		color: #fff;
		font-size: 20upx;
		text-align: center;
		line-height: 36upx;
	}

	.daoh-item image {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 6rpx;
	}

	.daoh {
		position: fixed;
		bottom: 0;
		height: 110rpx;
		display: flex;
		justify-content: space-around;
		background: #fff;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		border-top: 1rpx solid #e5e5e5;
	}

	.content1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
